<template>
  <view class="page_con">
    <view class="top_con">
      <view class="banner_logo">
        <image
          style="width: 100%; height: 100%"
          src="/static/images/banner.png"
        ></image>
      </view>
      <view class="info">
        <view class="logo">
          <image
            style="width: 100%; height: 100%"
            src="/static/images/logo.png"
          ></image>
        </view>
        <view class="label">
          <view class="tab">
            <view class="right">
              <view class="flex">
                <image src="/static/images/bs.png"></image>资质齐全
              </view>
              <view class="flex">
                <image src="/static/images/bs.png"></image>品牌药房
              </view>
              <view class="flex">
                <image src="/static/images/bs.png"></image>放心问诊
              </view>
            </view>
            <view class="about" @click="about">
              关于<br />我们<u-icon
                name="play-right-fill"
                color="#ffffff"
                size="12"
              ></u-icon>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="section">
      <view class="ai_con">
        <view class="title">
          <image src="/static/images/msg.png"></image>
          <span>您好，我是AI中医健康助理</span>
        </view>
        <view class="prompt">根据您的健康档案提供专属建议</view>
        <view class="search">
          <u-input
            :border="false"
            type="number"
            placeholder="学医问药,健康咨询"
            v-model="search_keyworld"
            style="width: 70%"
          ></u-input>
          <span @click="adviceAi()">去咨询</span>
        </view>
        <view class="search_kefu">
          <image
            src="/static/images/search_kefu.png"
            style="width: 100%; height: 100%"
          ></image>
        </view>
      </view>
      <view class="tab_con">
        <u-row justify="space-between">
          <u-col span="3">
            <view class="guid" @click="reservationClick()">
              <image src="/static/images/kzyy.png"></image>
              <text>看诊预约</text>
            </view>
          </u-col>
          <u-col span="3">
            <view class="guid" @click="visitClick()">
              <image src="/static/images/fzxf.png"></image>
              <text>复诊续方</text>
            </view>
          </u-col>
          <u-col span="3">
            <view class="guid relativeGuid">
              <image src="/static/images/afzy.png"></image>
              <text>按方抓药</text>
              <navigator target="miniProgram" open-type="navigate" app-id="wxe4a6419a099248f0" path="pages/subPack1/comeEnter/index" version="trial" extra-data="">
                  <view style="position:absolute;width:70px;height:80px;top: 0rpx;"></view>
              </navigator>
            </view>
          </u-col>
          <u-col span="3">
            <view class="guid" @click="evaluationClick()">
              <image src="/static/images/jkcp.png"></image>
              <text>健康测评</text>
            </view>
          </u-col>
        </u-row>
      </view>
      <view class="doctor_con">
        <uni-swiper-dot
          :info="doctorList"
          :current="current"
          field="content"
          mode="round"
		  :dots-styles="dotsStyles"
        >
          <swiper class="swiper-box" @change="changeDoc">
            <swiper-item v-for="(item, index) in doctorList" :key="index">
              <view class="swiper-item">
                <view class="top">
                  <view class="left">
                    <image src="/static/images/logo_info.png"></image>
                    <span>名</span>
                    <span>医</span>
                  </view>
                  <view class="more"
                    >更多<u-icon
                      name="arrow-right"
                      color="#999"
                      size="18"
                    ></u-icon
                  ></view>
                </view>
                <view class="text">香薷名医 专病专治</view>
                <view class="info">
                  <image :src="imgHttps + item.doctorImg[0]"></image>
                  <view class="info_box">
                    <view class="up">
                      <view class="name">{{ item.doctorName }}</view>
                      <view class="tag">{{ item.introduction }}</view>
                      <!-- <view class="tag">中医基础系</view> -->
                    </view>
                    <view class="down">
                      <view class="star">{{ item.title }}</view>
                      <!-- <view class="star">三甲</view> -->
                    </view>
                  </view>
                </view>
                <view class="label">
                  <view class="card">
                    <image src="/static/images/lable1.png"></image>
                    <text>服务</text>
                    <span>{{ item.serviceCount }}</span>
                  </view>
                  <view class="card">
                    <image src="/static/images/lable2.png"></image>
                    <text>评价</text>
                    <span>{{ item.ratingCount }}</span>
                  </view>
                  <view class="card">
                    <image src="/static/images/lable3.png"></image>
                    <text>锦旗</text>
                    <span>{{ item.bannerCount }}</span>
                  </view>
                </view>
                <view class="descraption">
                  {{ item.expertise }}
                  <!-- 擅长治疗:月经不调、痛经、妇科炎症、更年期综合征、面部色斑、痤疮、失眠、慢性支气管炎、咳喘、各种慢性胃炎等常见病、多发病、疑难病。 -->
                </view>
                <view class="bottom">
                  <view class="btn" @click="appointmentClick(item)"
                    >挂号看诊</view
                  >
                </view>
              </view>
            </swiper-item>
          </swiper>
        </uni-swiper-dot>
      </view>
      <view class="medicinal">
        <view class="top">
          <view class="left">
            <image src="/static/images/logo_info.png"></image>
            <span>药</span>
            <span>材</span>
          </view>
          <view class="more"
            >更多<u-icon name="arrow-right" color="#999" size="18"></u-icon
          ></view>
        </view>
        <view class="text">香薷精选 源头工厂</view>
		<view class="shop_con">
			<view class="card" v-for="(item,index) in goodShopsList" :key='index'>
				<image :src="imgHttps + item.pic"></image>
				<view class="descraption">
					<view class="name">{{item.prodName}}</view>
					<view class="text">{{item.brief}}</view>
					<view class="bottom">
						<view class="actual_price">￥{{item.price}}</view>
						<view class="old_price">￥{{item.oriPrice}}</view>
					</view>
				</view>
			</view>
		</view>
      </view>
      <view class="stores">
        <view class="top">
          <view class="left">
            <image src="/static/images/logo_info.png"></image>
            <span>门</span>
            <span>店</span>
          </view>
          <view class="more"
            >更多<u-icon name="arrow-right" color="#999" size="18"></u-icon
          ></view>
        </view>
        <view class="text">香薷直营 多家门店</view>
        <view class="shop_box">
          <view class="left">
            <image @click="shopDetail(shopList[0])" src="/static/images/shop1.png"></image>
            <view class="bottom">
              <view class="name">{{ shopList[0].shopFirstName }}</view>
              <view class="des">
                <image src="/static/images/lable1.png"></image>
                服务 <text>{{ shopList[0].serviceCount }}</text>
              </view>
              <view class="des">
                <image src="/static/images/lable3.png"></image>
                锦旗 <text>{{ shopList[0].bannerCount }}</text>
              </view>
            </view>
          </view>
          <view class="right">
            <!-- <view class="img up_img" @click="shopDetail()">
						<image src="/static/images/shop2.png"></image>
						<view class="img_info">
							<view>{{shopList[0].shopFirstName}}</view>
							<view>距您﹥50km</view>
						</view>
					</view> -->
            <view class="img" @click="shopDetail(shopList[1])">
              <image src="/static/images/shop3.png"></image>
              <view class="img_info">
                <view>{{ shopList[1].shopFirstName }}</view>
                <view>距您﹥50km</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

	<!-- 用户登录弹窗 -->
	<u-popup
	  v-model="showLogin"
	  mode="center"
	  :round="10"
	  @open="open"
	  :overlay="true"
	  :safeAreaInsetBottom="false"
	>
	  <view class="login_con">
	    <view class="title">您当前未登录，请先登录!</view>
		<view class="btn">
			<button
			  class="loginShop"
			  open-type="getPhoneNumber"
			  @getphonenumber="handleGetPhoneNumber"
			  type="primary"
			>
			  立即登录
			</button>
		</view>
	    
	  </view>
	</u-popup>

    <!-- kefu -->
    <view class="kefu_fixed">
      <image
        src="/static/images/kefu.png"
        style="width: 100%; height: 100%"
      ></image>
    </view>
  </view>
</template>

<script>
import { getDoctorList, getShopList,prodlist } from "@/api/consultation";
export default {
  data() {
    return {
      showLogin: false, // 初始化为false，由onReady中判断
      token: uni.getStorageSync("token"),
      imgHttps: "https://shop-img.xiangruzy.cn",
      search_keyworld: "",
      info: [
        {
          content: "内容 A",
        },
        {
          content: "内容 B",
        },
        {
          content: "内容 C",
        },
      ],
	  goodShopsList:[],
      current: 0,
      doctorList: [],
      mode: "round",
      shopList: [],
       dotsStyles: {
              width: 12,
              bottom: 30,
              backgroundColor: 'rgba(255, 255, 255, 0.3)',
              border: '1px solid rgba(255, 255, 255, 0.3)',
              color: '#fff',
              selectedBackgroundColor: 'rgba(249, 249, 249, 0.9)',
              selectedBorder: '1px solid rgba(249, 249, 249, 0.9)'
          }
    };
  },
  onReady() {
    console.log('页面准备就绪');
    this.checkLoginStatus();
  },
  onShow() {
    // 每次显示页面都检查登录状态
    this.checkLoginStatus();
    this.getShopFun();
	this.getChooseList()
  },
  methods: {
    // 检查登录状态
    checkLoginStatus() {
      this.token = uni.getStorageSync("token");
      if (!this.token) {
        this.showLogin = true;
        uni.hideTabBar(); // 隐藏tabbar
      } else {
        this.showLogin = false;
        uni.showTabBar();
      }
    },
    // 医生列表
    async getDoctorFun(shopCode) {
      let that = this;
      let res = await getDoctorList({ shopCode: shopCode });
      console.log(res);
      if (res.code == 200) {
        that.doctorList = res.rows || [];
      }
    },
    // 门店列表
    async getShopFun() {
      let that = this;
      let res = await getShopList();
      console.log(res);
      if (res.code == 200) {
        that.shopList = res.rows || [];
        that.getDoctorFun(res.rows[0].shopCode);
      }
    },
	// 药食同源
	async getChooseList(){
		let that = this
		let res = await prodlist({pageSize:10,pageNum:1,categoryId: 98,});
		console.log(res)
		if(res.code == 200 ){
			that.goodShopsList = res.rows || []
		}
	},
    changeDoc(e) {
      this.current = e.detail.current;
    },
    // 看诊预约
    reservationClick() {
      // 检查登录状态
      if (!this.token) {
        this.showLogin = true;
        return;
      }
      uni.navigateTo({
        url: "/pages/tabbar/home/reservation",
      });
    },
    // 复诊续方
    visitClick() {
      // 检查登录状态
      if (!this.token) {
        this.showLogin = true;
        return;
      }
      uni.navigateTo({
        url: "/pages/tabbar/home/visit",
      });
    },
    // 健康测评
    evaluationClick() {
      // 检查登录状态
      if (!this.token) {
        this.showLogin = true;
        return;
      }
      uni.navigateTo({
        url: "/pages/tabbar/home/evaluation",
      });
    },
    // 门店详情
    shopDetail(val) {
      // 检查登录状态
      if (!this.token) {
        this.showLogin = true;
        return;
      }
      uni.navigateTo({
        url: "/pages/tabbar/home/shopDetail?shopDetail=" + encodeURIComponent(JSON.stringify(val)),
      });
    },
    // 预约详情
    appointmentClick(val) {
      // 检查登录状态
      if (!this.token) {
        this.showLogin = true;
        return;
      }
      uni.navigateTo({
        url:
          "/pages/tabbar/home/appointment?shopCode=SH1756479678793492393&" +
          "departmentCode=" +
          val.departmentCode +
          "&doctorCode=" +
          val.doctorCode,
      });
    },
    // 按方抓药
    medicineClic() {
      // 检查登录状态
      // if (!this.token) {
      //   this.showLogin = true;
      //   return;
      // }
    },
    adviceAi() {
      // 检查登录状态
      if (!this.token) {
        this.showLogin = true;
        return;
      }
      uni.navigateTo({
        url: "/pages/tabbar/home/searchAI",
      });
    },
     // 获取手机号回调
    async handleGetPhoneNumber(e) {
      let _self = this;
      if (e.detail.errMsg !== "getPhoneNumber:ok") {
        uni.showToast({ title: "用户拒绝授权", icon: "none" });
        return;
      }

      // 1. 获取微信登录 code（用于后端换取 openid）
      const [loginErr, loginRes] = await uni.login({
        provider: "weixin",
      });
      if (loginErr) {
        uni.showToast({ title: "微信登录失败", icon: "none" });
        return;
      }

      // 2. 发送 code + encryptedData + iv 到后端
      uni.showLoading({ title: "登录中..." });
      const [reqErr, res] = await uni.request({
        url: "https://tcm.xiangruzy.cn/hospital/wxapi/wxlogin", //生产
        // url:'http://192.168.2.40:8080/wxapi/wxlogin',
        method: "POST",
        data: {
          code: loginRes.code, // 微信 code
          encryptedData: e.detail.encryptedData, // 加密数据
          iv: e.detail.iv, // 解密向量
        },
      });
      uni.hideLoading();

      if (reqErr || res.data.code !== 200) {
        uni.showToast({ title: "登录失败", icon: "none" });
        return;
      }
      if (res.data.code == 200) {
        uni.showToast({
          title: "登录成功",
          icon: "none",
        });
        // 3. 登录成功，存储 token 和用户信息
        console.log(res.data.data.openId);
        uni.setStorageSync("token", res.data.data.token);
        uni.setStorageSync("openId", res.data.data.openId);
        // uni.setStorageSync("userId", res.data.data.userId);
        uni.setStorageSync("userPhone", res.data.data.userMobile);
        _self.showLogin = false;
        uni.showTabBar();
      }
    },
    // 登录成功处理
    loginSuccess() {
      // 模拟登录成功
      uni.setStorageSync('token', 'mock_token');
      this.showLogin = false;
      uni.showTabBar();
      
      uni.showToast({
        title: '登录成功',
        icon: 'success'
      });
      
      // 重新加载数据
      this.getShopFun();
    },
    // 弹窗打开事件
    open() {
      console.log('登录弹窗已打开');
    }
  },
};
</script>
<style lang="scss" scoped>
page {
  position: relative;
  background-color: #f6f4f5;
}

.page_con {
  width: 100%;
  background-color: #f6f4f5;
}
.kefu_fixed {
  position: fixed;
  bottom: 100rpx;
  right: 50rpx;
  width: 158rpx;
  height: 183rpx;
}
.top_con {
  width: 100%;
  height: 425rpx;
  position: relative;
  font-family: PingFang SC, PingFang SC;
  .banner_logo {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
  .info {
    position: absolute;
    top: 30rpx;
    left: 0;
    // border:1rpx solid #fff;
    width: 100%;
    padding: 20rpx 0;
    .logo {
      width: 310rpx;
      height: 94rpx;
      padding-left: 40rpx;
      margin-bottom: 40rpx;
    }

    .label {
      padding-left: 40rpx;
      .tab {
        width: 100%;
        display: flex;
        .about {
          width: 80rpx;
          text-align: center;
          color: #ffffff;
          font-size: 24rpx;
          font-weight: 400;
          padding: 10rpx 0;
          background: #c09579;
          border-radius: 10rpx 0rpx 0rpx 10rpx;
          display: flex;
          align-items: center;
        }
        .right {
          display: flex;
          align-items: center;
          flex: 1;
          view {
            flex: 1;
            font-weight: 400;
            font-size: 24rpx;
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            image {
              width: 25rpx;
              height: 30rpx;
              margin-right: 15rpx;
            }
          }
        }
      }
    }
  }
}
.section {
  position: relative;
  top: -100rpx;
  left: 0;
  padding: 0 30rpx;
  font-family: PingFang SC, PingFang SC;
}
.ai_con {
  padding: 42rpx 30rpx;
  background: linear-gradient(180deg, #fef8f2 1%, #ffffff 100%);
  box-shadow: 0px 2rpx 15rpx 0px rgba(0, 0, 0, 0.05);
  border-radius: 18rpx 18rpx 18rpx 18rpx;
  border: 2rpx solid #ffffff;
  margin-bottom: 20rpx;
  position: relative;
  .search_kefu {
    position: absolute;
    right: 50rpx;
    top: 10rpx;
    width: 120rpx;
    height: 147rpx;
  }
  .title {
    display: flex;
    align-items: center;
    margin-bottom: 17rpx;
    image {
      width: 44rpx;
      height: 38rpx;
      margin-right: 12rpx;
    }
    span {
      font-weight: 400;
      font-size: 30rpx;
      color: #000000;
    }
  }
  .prompt {
    font-weight: 400;
    font-size: 26rpx;
    color: #666666;
    margin-bottom: 34rpx;
  }
  .search {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5rpx 8rpx;
    background: #ffffff;
    border-radius: 10rpx 10rpx 10rpx 10rpx;
    border: 1px solid #7d2527;
    span {
      width: 158rpx;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      background: #7d2527;
      border-radius: 10rpx 10rpx 10rpx 10rpx;
      font-weight: 400;
      font-size: 30rpx;
      color: #fff;
    }
  }
}
.tab_con {
  background: #ffffff;
  border-radius: 18rpx 18rpx 18rpx 18rpx;
  padding: 23rpx 30rpx;
  margin-bottom: 20rpx;
  .guid {
    text-align: center;
    image {
      width: 124rpx;
      height: 116rpx;
      margin: 0 auto;
    }
    text {
      font-weight: 400;
      font-size: 26rpx;
      color: #000000;
      height: 30rpx;
      line-height: 30rpx;
    }
  }
  .relativeGuid{
    position: relative;
  }
}
.doctor_con {
  background: #ffffff;
  padding: 23rpx 30rpx;
  border-radius: 15px 15px 15px 15px;
  margin-bottom: 20rpx;
  .swiper-box {
    height: 580rpx;
    .swiper-item {
      .top {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10rpx;
        .left {
          display: flex;
          align-items: center;
          image {
            width: 66rpx;
            height: 72rpx;
          }
          span {
            display: inline-block;
            background: #7d2527;
            width: 40rpx;
            height: 40rpx;
            text-align: center;
            line-height: 40rpx;
            font-size: 30rpx;
            font-weight: 400;
            color: #ffffff;
            border-radius: 40rpx;
          }
        }
        .more {
          display: flex;
          align-items: center;
          color: #666666;
          font-weight: 400;
          font-size: 26rpx;
        }
      }
      .text {
        font-weight: 400;
        font-size: 26rpx;
        color: #666666;
        margin-bottom: 24rpx;
      }
      .info {
        display: flex;
        align-items: center;
        margin-bottom: 24rpx;
        image {
          width: 110rpx;
          height: 110rpx;
          border-radius: 50%;
        }
        .info_box {
          flex: 1;
          padding-left: 24rpx;
          .up {
            display: flex;
            align-items: center;
            margin-bottom: 10rpx;
            .name {
              font-weight: 600;
              font-size: 34rpx;
              color: #000000;
              margin-right: 20rpx;
            }
            .tag {
              font-weight: 400;
              font-size: 26rpx;
              color: #000000;
              margin-right: 20rpx;
              flex: 1;
              // 新增以下样式，实现三行超出显示省略号
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 3;
              -webkit-box-orient: vertical;
            }
          }
          .down {
            display: flex;
            align-items: center;
            .hospital {
              font-weight: 400;
              font-size: 26rpx;
              color: #000000;
              margin-right: 20rpx;
            }
            .star {
              font-weight: 400;
              font-size: 26rpx;
              color: #43578e;
            }
          }
        }
      }
      .label {
        display: flex;
        padding: 15rpx 31rpx;
        background: #f5f4ec;
        border-radius: 5rpx 5rpx 5rpx 5rpx;
        margin-bottom: 18rpx;
        .card {
          flex: 1;
          display: flex;
          align-items: center;
          font-weight: 400;
          font-size: 26rpx;
          text {
            color: #333333;
            margin-right: 15rpx;
          }
          span {
            color: #7d2527;
          }
          image {
            width: 26rpx;
            height: 27rpx;
            margin-right: 10rpx;
          }
        }
      }
      .descraption {
        margin-bottom: 22rpx;
        font-weight: 400;
        font-size: 26rpx;
        color: #000000;
        // 新增以下样式，实现三行超出显示省略号
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
      }
      .bottom {
        display: flex;
        justify-content: flex-end;
        .btn {
          width: 205rpx;
          height: 60rpx;
          line-height: 60rpx;
          text-align: center;
          background: #7d2527;
          border-radius: 50rpx;
          font-weight: 400;
          color: #fff;
          font-size: 35rpx;
        }
      }
    }
  }
}
.medicinal {
  padding: 30rpx;
  background: #ffffff;
  border-radius: 15px 15px 15px 15px;
  margin-bottom: 20rpx;
  .top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10rpx;
    .left {
      display: flex;
      align-items: center;
      image {
        width: 66rpx;
        height: 72rpx;
      }
      span {
        display: inline-block;
        background: #7d2527;
        width: 40rpx;
        height: 40rpx;
        text-align: center;
        line-height: 40rpx;
        font-size: 30rpx;
        font-weight: 400;
        color: #ffffff;
        border-radius: 40rpx;
      }
    }
    .more {
      display: flex;
      align-items: center;
      color: #666666;
      font-weight: 400;
      font-size: 26rpx;
    }
  }
  .text {
    font-weight: 400;
    font-size: 26rpx;
    color: #666666;
    margin-bottom: 24rpx;
  }
  .shop_con{
  		  display: flex;
  		  gap: 14rpx;
  		  justify-content: space-between;
  // 设置子元素两等分，超出换行
  flex-wrap: wrap;
  
  		  .card{
  			  width:48%;
  			  border:1rpx solid #E4E4E4;
  			  border-radius: 20rpx;
  			  image{
  				  width:100%;
  				  height:227rpx;
  				  border-radius: 20rpx 20rpx 0px 0px;
  			  }
  			  .descraption{
  				  padding: 10rpx 22rpx 22rpx 22rpx;
  				  .name{
  					  font-weight: 400;
  					  font-size: 30rpx;
  					  color: #000000;
  					  margin-bottom: 10rpx;
  				  }
  				  .text{
  					  font-weight: 400;
  					  font-size: 24rpx;
  					  color: #999999;
  					  margin-bottom: 10rpx;
  				  }
  				  .bottom{
  					  display: flex;
  					  .actual_price{
  						  font-weight: 400;
  						  font-size: 36rpx;
  						  color: #7D2527;
  						  margin-right: 10rpx;
  					  }
  					  .old_price{
  						  font-weight: 400;
  						  font-size: 24rpx;
  						  color: #999999;
  						  padding-top: 12rpx;
  						  text-decoration: line-through;
  					  }
  				  }
  			  }
  		  }
  }
  .guid_box {
    display: flex;
    justify-content: space-between;
    .guid {
      width: 48%;
      border: 1px solid #ebedf0;
      border-radius: 0 0 10rpx 10rpx;
      image {
        width: 302rpx;
        height: 227rpx;
        border-radius: 10rpx 10rpx 0 0;
      }
      .bottom_info {
        padding: 14rpx 20rpx;

        .shopName {
          font-weight: 400;
          font-size: 30rpx;
          color: #000000;
          margin-bottom: 10rpx;
        }
        .shopDes {
          font-weight: 400;
          font-size: 24rpx;
          color: #999999;
          margin-bottom: 10rpx;
        }
        .shop_price {
          display: flex;
          color: #7d2527;
          font-size: 36rpx;
          span {
            font-weight: 400;
            font-size: 26rpx;
            color: #999999;
            margin-left: 20rpx;
            padding-top: 10rpx;
          }
        }
      }
    }
  }
}
.stores {
  background: #ffffff;
  border-radius: 18px 18px 18px 18px;
  padding: 23rpx 22rpx;
  .top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10rpx;
    .left {
      display: flex;
      align-items: center;
      image {
        width: 66rpx;
        height: 72rpx;
      }
      span {
        display: inline-block;
        background: #7d2527;
        width: 40rpx;
        height: 40rpx;
        text-align: center;
        line-height: 40rpx;
        font-size: 30rpx;
        font-weight: 400;
        color: #ffffff;
        border-radius: 40rpx;
      }
    }
    .more {
      display: flex;
      align-items: center;
      color: #666666;
      font-weight: 400;
      font-size: 26rpx;
    }
  }
  .text {
    font-weight: 400;
    font-size: 26rpx;
    color: #666666;
    margin-bottom: 24rpx;
  }
  .shop_box {
    display: flex;
    justify-content: space-between;
    .left {
      width: 52%;
      image {
        width: 340rpx;
        height: 333rpx;
      }
      .bottom {
        padding-top: 15rpx;
        .name {
          margin-bottom: 15rpx;
          font-weight: 500;
          font-size: 26rpx;
          color: #000000;
        }
        .des {
          display: flex;
          align-items: center;
          font-weight: 400;
          font-size: 26rpx;
          color: #666666;
          margin-bottom: 15rpx;
          image {
            width: 28rpx;
            height: 26rpx;
            margin-right: 5rpx;
          }
          text {
            color: #7d2527;
            margin-left: 5rpx;
          }
        }
      }
    }
    .right {
      width: 46%;
      .img {
        position: relative;
        image {
          width: 274rpx;
          height: 224rpx;
        }
        .img_info {
          position: absolute;
          top: 50%;
          left: 0;
          font-weight: 500;
          font-size: 22rpx;
          color: #ffffff;
          padding-left: 20rpx;
          view {
            margin-bottom: 15rpx;
          }
        }
      }
      .up_img {
        margin-bottom: 10rpx;
      }
    }
  }
}

.login_con{
    width:600rpx;
    padding: 100rpx 0 100rpx 0;
    text-align: center;
    .title{
        width:100%;
        font-size: 30rpx;
        margin-bottom: 20rpx;
    }
	.btn{
		width:70%;
		margin: 0 auto;
	}
}
.loginShop{
    width:60%;
    margin: 0 auto;
    text-align: center;
    height:50rpx;
    line-height: 50rpx;
    background: #BD444C;
    font-size: 25rpx;
}
</style>
